<template>
  <!-- 搜索框 -->
  <div>
    <SearchBox />
  </div>
  <!-- 9个分类 -->
  <div class="category-container">
    <div
      v-for="(item, index) in nine"
      :key="index"
      class="category-item"
      @click="handleCurrentChange(item)"
      :class="{ 'active': item.id === activeId }"
      @mouseover="hoverItem(item.id)"
      @mouseout="unhoverItem(item.id)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script setup>
import SearchBox from '../components/SearchBox.vue'
import { onMounted, ref } from "vue"
import axios from "axios"
import router from "../router/index.js";

const handleCurrentChange = (val) => {
  console.log('当前页:', val.id);
  if (val.id === 1 || val.id === 3 || val.id === 8) {
    router.push(val.link);
  } else {
    console.log(val.link);
    router.push(val.link);
  }
}

const nine = ref([]);
const activeId = ref(null);
const hoveredId = ref(null);

const hoverItem = (id) => {
  hoveredId.value = id;
};

const unhoverItem = (id) => {
  hoveredId.value = null;
};

onMounted(() => {
  // 获取9个分类
  axios.get(`http://localhost:8000/app/health_info_category/`)
    .then(res => {
      // console.log(res.data);
      nine.value = res.data;
    });
});
</script>

<style scoped>
/* 搜索框容器 */
.search-container {
  margin-bottom: 20px;
}

/* 9个分类容器 */
.category-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.category-item {
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
  font-size: 16px;
  color: #333;
  text-align: center;
  flex-basis: calc(16.6667% - 10px); /* 每行显示6个分类，减去gap */
}

.category-item:hover {
  background-color: #f0f0f0;
  border-color: #aaa;
}

.category-item.active {
  background-color: #007bff;
  color: #fff;
  border-color: #0056b3;
}

.category-item:hover.active {
  background-color: #0056b3;
  border-color: #003d80;
}
</style>
